{% extends "zato/index.html" %}

{% block html_title %}SMS Twilio connections - Send a message{% endblock %}

{% block "extra_js" %}

    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/jquery/jquery.form.js"></script>

    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/common.js"></script>
    <script nonce="{{ CSP_NONCE }}" type="text/javascript" src="/static/js/sms/twilio/send-message.js"></script>

{% endblock %}

{% block "content" %}

<div id="user-message-div" style='display:none'><pre id="user-message" class="user-message"></pre></div>

<div id="markup">
    <table id="data-table">
        <tr>
            <td class='inline_header'>Send a message using SMS Twilio connection `{{ item.name }}`</td>
        </tr>
        <tr>
            <td>
                <form novalidate id="send_message_form" action="{% url "sms-twilio-send-message-action" cluster_id conn_id name_slug %}" method="post">
                {% csrf_token %}
                    <textarea style="width:100%; height:350px" id="body" name="body">Hello from Zato!</textarea>
                    <br/><br/>

                    <table>
                        <tr>
                            <td>
                                From:
                            </td>
                            <td>
                                <input type="text" name="from_" value="{{ item.default_from|default:"" }}" id="from_" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                To:
                            </td>
                            <td>
                                <input type="text" name="to" value="{{ item.default_to|default:"" }}" id="to"/>
                            </td>
                        </tr>
                    </table>

                    <input type="hidden" id="id" name="id" value="{{ conn_id }}" />
                    <input type="hidden" id="cluster_id" name="cluster_id" value="{{ cluster_id }}" />

                    <div style="text-align:right">
                        <input type="submit" value="Submit" />
                    </div>

                </form>
            </td>
        </tr>
    </table>
</div>


{% endblock %}
